<template>
  <el-dialog :model-value="visible" title="产品维修" width="1020" top="20px" :show-close="false"
    :close-on-click-modal="false">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-suffix=":" inline
      label-position="right">
      <el-form-item class="form-item" label="维修工程师">
        <el-input disabled :model-value="form.cuser || user.realName"></el-input>
      </el-form-item>
      <el-form-item class="form-item" label="维修时间">
        <el-input disabled :model-value="form.ctime || now"></el-input>
      </el-form-item>
      <el-form-item class="form-item" label="维修状态" prop="repairStateCode">
        <zw-select :data="repairStateList" value-key="code" label-key="name" v-model:label="form.repairState"
          v-model:value="form.repairStateCode"></zw-select>
      </el-form-item>
      <el-form-item class="form-item" label="是否支付" prop="payState">
        <el-select v-model="form.payState">
          <el-option label="是" value="是"></el-option>
          <el-option label="否" value="否"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="form-item" label="付款日期" prop="payDate">
        <zw-date-picker v-model="form.payDate"></zw-date-picker>
      </el-form-item>
      <el-form-item class="form-item" label="付款方式" prop="payTypeCode">
        <zw-select :data="payTypeList" value-key="code" label-key="name" v-model:label="form.payType"
          v-model:value="form.payTypeCode"></zw-select>
      </el-form-item>
      <el-form-item class="form-item" label="是否开票" prop="isInvoice">
        <el-select v-model="form.isInvoice">
          <el-option label="是" :value="true"></el-option>
          <el-option label="否" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="form-item" label="发票类型" prop="invoiceTypeCode">
        <zw-select :data="invoiceTypeList" value-key="code" label-key="name" v-model:label="form.invoiceType"
          v-model:value="form.invoiceTypeCode"></zw-select>
      </el-form-item>
      <el-form-item class="form-item" label="发票号码" prop="invoiceNumber">
        <el-input v-model="form.invoiceNumber"></el-input>
      </el-form-item>
      <el-form-item class="form-item" label="开票日期" prop="invoiceDate">
        <zw-date-picker v-model="form.invoiceDate"></zw-date-picker>
      </el-form-item>
      <el-form-item class="form-item" label="返回快递日期" prop="returnDate">
        <zw-date-picker v-model="form.returnDate"></zw-date-picker>
      </el-form-item>
      <el-form-item class="form-item" label="返回快递单号" prop="returnNumber">
        <el-input v-model="form.returnNumber"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="emits('close', false)">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import ZwSelect from '@/components/Form/ZwSelect.vue';
import ZwDatePicker from '@/components/Form/ZwDatePicker.vue';
import DateUtil from '@/plugins/date';
import type { OrderProductRepairDTO } from '@/server/afterSale/types';
import ApiTree from '@/server/api-tree';
import { DictTypeEnum, type DictVO } from '@/server/dict/types';
import type { UserVO } from '@/server/user/types';
import { reactive, ref, useTemplateRef, watch } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import StoreManager from '@/plugins/storage';
const user = ref<UserVO>(StoreManager.get<UserVO>("user"));
const now = ref<string>(DateUtil.now());
const props = defineProps<{
  orderId: string,
  productCode: string,
  productSn: string,
  visible: boolean
}>();
const emits = defineEmits(["close"])
const form = ref<OrderProductRepairDTO>({
  guid: "",
  /**
   * 工单id
   */
  orderId: "",

  /**
   * 产品SN
   */
  productSn: "",

  /**
   * 支付状态
   */
  payState: "",

  /**
   * 支付日期
   */
  payDate: "",
  /**
   * 支付方式
   */
  payTypeCode: "",
  /**
   * 支付方式
   */
  payType: "",

  /**
   * 是否开票
   */
  isInvoice: false,
  /**
   * 开票类型
   */
  invoiceTypeCode: "",
  /**
   * 开票类型
   */
  invoiceType: "",

  /**
   * 发票编号
   */
  invoiceNumber: "",

  /**
   * 开票日期
   */
  invoiceDate: "",

  /**
   * 快递返回日期
   */
  returnDate: "",

  /**
   * 快递返回单号
   */
  returnNumber: "",
  /**
   * 产品维修状态编码
   */
  repairStateCode: "",
  /**
   * 维修状态
   */
  repairState: "",
  cuserId: "",
  cuser: "",
  ctime: "",
  utserId: "",
  utser: "",
  utime: "",
})
const formRef = useTemplateRef<FormInstance>("formRef");
const rules = reactive<FormRules<OrderProductRepairDTO>>({
  repairStateCode: [{ required: true, message: "维修状态不能为空" }],
  payState: [{ required: true, message: "支付状态不能为空" }],
  isInvoice: [{ required: true, message: "是否开票不能为空" }],
  returnDate: [{ required: true, message: "返回快递日期不能为空" }],
  returnNumber: [{ required: true, message: "返回快递编号不能为空" }],
})
watch(() => form.value.payState, () => {
  if (form.value.payState === "是") {
    rules.payDate = [{ required: true, message: "支付日期不能为空" }]
    rules.payTypeCode = [{ required: true, message: "支付方式不能为空" }]
  } else {
    rules.payDate = [{ required: false }];
    rules.payTypeCode = [{ required: false }];
  }
}, { immediate: true });
watch(() => form.value.isInvoice, () => {
  if (form.value.isInvoice) {
    rules.invoiceTypeCode = [{ required: true, message: "发票类型不能为空" }]
    rules.invoiceNumber = [{ required: true, message: "发票号码不能为空" }];
    rules.invoiceDate = [{ required: true, message: "开票日期不能为空" }]
  } else {
    rules.invoiceTypeCode = [{ required: false, }]
    rules.invoiceNumber = [{ required: false, }]
    rules.invoiceDate = [{ required: false, }]
  }
}, { immediate: true });
/** 质保状态 */
const repairStateList = ref<DictVO[]>([])
const getRepairStateList = async () => {
  const { success, data } = await ApiTree.dict.list(DictTypeEnum.REPAIR_STATE, true);
  if (success) {
    repairStateList.value = data;
  }
}
/** 付款方式 */
const payTypeList = ref<DictVO[]>([])
const getPayTypeList = async () => {
  const { success, data } = await ApiTree.dict.list(DictTypeEnum.PAY_TYPE, true);
  if (success) {
    payTypeList.value = data;
  }
}
/** 发票类型 */
const invoiceTypeList = ref<DictVO[]>([])
const getInvoiceTypeList = async () => {
  const { success, data } = await ApiTree.dict.list(DictTypeEnum.INVOICE_TYPE, true);
  if (success) {
    invoiceTypeList.value = data;
  }
}
const onSubmit = () => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      const data = {
        ...form.value,
        payDate: DateUtil.formatToTime(form.value.payDate),
        invoiceDate: DateUtil.formatToTime(form.value.invoiceDate),
        returnDate: DateUtil.formatToTime(form.value.returnDate),
        orderId: props.orderId,
        productSn: props.productSn,
      }
      const { success, msg } = !form.value.guid ? await ApiTree.afterSaleOrder.createRepairDetail(data) : await ApiTree.afterSaleOrder.updateRepairDetail(data)
      if (success) {
        ElMessage.success(msg)
        emits("close");
      }
    }
  })
}
/** 查询明细 */
const getProductRepairDetail = async () => {
  const { success, data } = await ApiTree.afterSaleOrder.getRepairDetail(props.orderId, props.productSn);
  if (success && data) {
    //
    form.value = {
      ...data,
      payDate: DateUtil.resolve(data.payDate, true),
      invoiceDate: DateUtil.resolve(data.invoiceDate, true),
      returnDate: DateUtil.resolve(data.returnDate, true)
    };
  }
}
watch(() => props.visible, () => {
  if (props.visible) {

    getPayTypeList();
    getRepairStateList();
    getInvoiceTypeList();
    getProductRepairDetail();
  }
}, { immediate: true })
</script>
<style lang="scss" scope></style>
